<template>
  <div class="sysbrowser-test">
    <el-card class="test-card">
      <div slot="header" class="clearfix">
        <span>SysBrowser组件测试</span>
      </div>
      
      <!-- 单选模式测试 -->
      <div class="test-section">
        <h3>SysBrowser通用组件测试（用户选择）</h3>
        <div class="form-item">
          <label>选择用户:</label>
          <SysBrowser
            v-model="singleValue"
            :columns="userColumns"
            :search-fields="userSearchFields"
            :api="getUserList"
            title="选择用户"
            placeholder="请选择用户"
            row-key="id"
            label-field="name"
            value-key="id"
            :display-label.sync="singleDisplayLabel"
            @change="handleSingleChange"
          />
        </div>
        <div class="result">
          <p><strong>选中值:</strong> {{ singleValue }}</p>
          <p><strong>显示标签:</strong> {{ singleDisplayLabel }}</p>
          <p><strong>选中数据:</strong> {{ JSON.stringify(singleData, null, 2) }}</p>
        </div>
      </div>

      <!-- 多选模式测试 -->
      <div class="test-section">
        <h3>多选模式测试</h3>
        <div class="form-item">
          <label>选择多个部门:</label>
          <SysBrowser
            v-model="multipleValue"
            :columns="deptColumns"
            :search-fields="deptSearchFields"
            :api="getDeptList"
            title="选择部门"
            placeholder="请选择部门"
            row-key="id"
            label-field="deptName"
            value-key="id"
            :multiple="true"
            :display-label.sync="multipleDisplayLabel"
            @change="handleMultipleChange"
          />
        </div>
        <div class="result">
          <p><strong>选中值:</strong> {{ multipleValue }}</p>
          <p><strong>显示标签:</strong> {{ multipleDisplayLabel }}</p>
          <p><strong>选中数据:</strong> {{ JSON.stringify(multipleData, null, 2) }}</p>
        </div>
      </div>

      <!-- BlockBrowser组件测试 -->
      <div class="test-section">
        <h3>BlockBrowser组件测试（所选择专用组件）</h3>
        <div class="form-item">
          <label>选择所（单选）:</label>
          <BlockBrowser
            v-model="blockSingleValue"
            :display-label.sync="blockSingleDisplayLabel"
            @change="handleBlockSingleChange"
          />
        </div>
        <div class="result">
          <p><strong>选中值:</strong> {{ blockSingleValue }}</p>
          <p><strong>显示标签:</strong> {{ blockSingleDisplayLabel }}</p>
          <p><strong>选中数据:</strong> {{ JSON.stringify(blockSingleData, null, 2) }}</p>
        </div>
        
        <div class="form-item" style="margin-top: 20px;">
          <label>选择所（多选）:</label>
          <BlockBrowser
            v-model="blockMultipleValue"
            :display-label.sync="blockMultipleDisplayLabel"
            :multiple="true"
            @change="handleBlockMultipleChange"
          />
        </div>
        <div class="result">
          <p><strong>选中值:</strong> {{ blockMultipleValue }}</p>
          <p><strong>显示标签:</strong> {{ blockMultipleDisplayLabel }}</p>
          <p><strong>选中数据:</strong> {{ JSON.stringify(blockMultipleData, null, 2) }}</p>
        </div>
      </div>

      <!-- 上传组件测试 -->
      <div class="test-section">
        <h3>上传组件测试</h3>
        
        <!-- 图片上传组件测试 -->
        <div class="upload-test-item">
          <h4>图片上传组件 (ImageUpload)</h4>
          <div class="component-controls">
            <el-checkbox v-model="imageUploadDisabled">禁用模式（仅预览）</el-checkbox>
          </div>
          <ImageUpload
            v-model="imageFiles"
            :max-count="3"
            :max-size="5"
            accept-types=".jpg,.jpeg,.png,.gif"
            :show-tips="true"
            :disabled="imageUploadDisabled"
          />
          <div class="result">
            <p><strong>绑定的图片数据:</strong></p>
            <pre>{{ JSON.stringify(imageFiles, null, 2) }}</pre>
          </div>
        </div>

        <!-- 文档上传组件测试 -->
        <div class="upload-test-item">
          <h4>文档上传组件 (DocumentUpload)</h4>
          <div class="component-controls">
            <el-checkbox v-model="documentUploadDisabled">禁用模式（仅预览）</el-checkbox>
          </div>
          <DocumentUpload
            v-model="documentFiles"
            :max-count="5"
            :max-size="10"
            accept-types=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt"
            :show-tips="true"
            :disabled="documentUploadDisabled"
          />
          <div class="result">
            <p><strong>绑定的文档数据:</strong></p>
            <pre>{{ JSON.stringify(documentFiles, null, 2) }}</pre>
          </div>
        </div>

        <!-- 原有的FileUpload组件测试 -->
        <div class="upload-test-item">
          <h4>文件上传弹窗组件 (FileUpload - 弹窗模式)</h4>
          <el-button type="primary" @click="showFileUploadDialog">打开文件上传弹窗</el-button>
          <FileUpload
            :visible.sync="fileUploadVisible"
            title="文件上传测试"
            width="900px"
            :auto-upload="false"
            :multiple="true"
            accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif"
            file-type-text="测试文件"
            :max-size="10"
            :show-tip="true"
            tip-text="支持上传PDF、Word、Excel、图片等格式，单个文件不超过10MB"
            :show-template="true"
            template-name="测试模板.xlsx"
            template-url="/static/template.xlsx"
            :show-file-list="true"
            file-list-title="已上传文件"
            :show-status="true"
            :show-actions="true"
            :show-preview="true"
            confirm-text="确认上传"
            @open="handleFileUploadOpen"
            @close="handleFileUploadClose"
            @confirm="handleFileUploadConfirm"
            @upload-success="handleUploadSuccess"
            @upload-error="handleUploadError"
            @download-template="handleDownloadTemplate"
          />
          <div class="result">
            <p><strong>弹窗上传结果:</strong></p>
            <pre>{{ JSON.stringify(dialogUploadFiles, null, 2) }}</pre>
          </div>
        </div>

        <!-- 字符串类型v-model测试 -->
        <div class="upload-test-item">
          <h4>字符串类型 v-model 测试</h4>
          
          <div class="string-test-section">
            <h5>图片上传组件 - 字符串模式</h5>
            <div class="component-controls">
              <el-checkbox v-model="imageUploadStringDisabled">禁用模式（仅预览）</el-checkbox>
            </div>
            <ImageUpload
              v-model="imageFilesString"
              :max-count="3"
              :max-size="5"
              accept-types=".jpg,.jpeg,.png,.gif"
              :show-tips="true"
              :disabled="imageUploadStringDisabled"
            />
            <div class="result">
              <p><strong>绑定的字符串数据:</strong></p>
              <textarea 
                v-model="imageFilesString" 
                rows="3" 
                style="width: 100%; font-family: monospace; font-size: 12px;"
                placeholder="JSON字符串格式"
              ></textarea>
            </div>
          </div>

          <div class="string-test-section">
            <h5>文档上传组件 - 字符串模式</h5>
            <div class="component-controls">
              <el-checkbox v-model="documentUploadStringDisabled">禁用模式（仅预览）</el-checkbox>
            </div>
            <DocumentUpload
              v-model="documentFilesString"
              :max-count="5"
              :max-size="10"
              accept-types=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt"
              :show-tips="true"
              :disabled="documentUploadStringDisabled"
            />
            <div class="result">
              <p><strong>绑定的字符串数据:</strong></p>
              <textarea 
                v-model="documentFilesString" 
                rows="3" 
                style="width: 100%; font-family: monospace; font-size: 12px;"
                placeholder="JSON字符串格式"
              ></textarea>
            </div>
          </div>

          <div class="string-test-controls">
            <el-button @click="testStringConversion">测试字符串转换</el-button>
            <el-button @click="clearStringData">清空字符串数据</el-button>
            <el-button @click="setStringTestData">设置测试字符串</el-button>
          </div>
        </div>

        <!-- 上传状态检测测试 -->
        <div class="upload-test-item">
          <h4>上传状态检测工具测试</h4>
          <div class="status-buttons">
            <el-button @click="checkUploadStatus">检查上传状态</el-button>
            <el-button @click="safeSubmitTest">安全提交测试</el-button>
            <el-button @click="waitForUploadsTest">等待上传完成测试</el-button>
            <el-button @click="clearAllFiles">清空所有文件</el-button>
          </div>
          <div class="status-display">
            <p><strong>页面上传状态:</strong> {{ uploadStatus }}</p>
            <p><strong>正在上传的文件数量:</strong> {{ uploadingCount }}</p>
            <p><strong>最后检测时间:</strong> {{ lastCheckTime }}</p>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="test-section">
        <h3>操作测试</h3>
        <el-button @click="clearSingle">清空单选</el-button>
        <el-button @click="clearMultiple">清空多选</el-button>
        <el-button @click="clearBlock">清空所选择</el-button>
        <el-button @click="setSampleValues">设置示例值</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import SysBrowser from '@/components/SysBrowser/index.vue'
import BlockBrowser from '@/components/SysBrowser/BlockBrowser.vue'
import ImageUpload from '@/components/ImageUpload.vue'
import DocumentUpload from '@/components/DocumentUpload.vue'
import FileUpload from '@/components/FileUpload.vue'
import { getBlockByGroup } from '@/api/industry.js'
import { 
  hasFilesUploading, 
  getUploadingFilesCount, 
  uploadCheckMixin,
  waitForUploadsComplete,
  globalUploadManager 
} from '@/utils/uploadUtils'
export default {
  name: 'SysBrowserTest',
  components: {
    SysBrowser,
    BlockBrowser,
    ImageUpload,
    DocumentUpload,
    FileUpload
  },
  mixins: [uploadCheckMixin],
  data() {
    return {
      // 单选数据
      singleValue: '',
      singleDisplayLabel: '',
      singleData: null,

      // 多选数据
      multipleValue: '',
      multipleDisplayLabel: '',
      multipleData: [],

      // BlockBrowser组件数据
      blockSingleValue: '',
      blockSingleDisplayLabel: '',
      blockSingleData: null,
      blockMultipleValue: '',
      blockMultipleDisplayLabel: '',
      blockMultipleData: [],

      // 用户表格列配置
      userColumns: [
        { prop: 'name', label: '姓名', width: 120 },
        { prop: 'username', label: '用户名', width: 150 },
        { prop: 'email', label: '邮箱', width: 200 },
        { prop: 'phone', label: '电话', width: 130 },
        { prop: 'status', label: '状态', width: 100 }
      ],

      // 用户搜索字段
      userSearchFields: [
        { prop: 'name', label: '姓名', type: 'input' },
        { prop: 'username', label: '用户名', type: 'input' }
      ],

      // 部门表格列配置
      deptColumns: [
        { prop: 'deptName', label: '部门名称', width: 200 },
        { prop: 'leader', label: '负责人', width: 120 },
        { prop: 'phone', label: '联系电话', width: 150 },
        { prop: 'status', label: '状态', width: 100 }
      ],

      // 部门搜索字段
      deptSearchFields: [
        { prop: 'deptName', label: '部门名称', type: 'input' },
        { prop: 'leader', label: '负责人', type: 'input' }
      ],

      // 上传组件相关数据
      imageFiles: [
  {
    "name": "WPS图片.png",
    "size": 1466,
    "type": "image/png",
    "url": "http://175.178.247.222:9990/uploadImages/WPS图片.png"
  }
],           // 图片文件数组
      documentFiles: [
  {
    "name": "WPS图片.png",
    "size": 1466,
    "type": "image/png",
    "url": "http://175.178.247.222:9990/uploadImages/WPS图片.png"
  }
],        // 文档文件数组
      
      // 字符串类型测试数据
      imageFilesString: '[{"name":"WPS图片.png","size":1466,"type":"image/png","url":"http://175.178.247.222:9990/uploadImages/WPS图片.png"}]',
      documentFilesString: '[{"name":"WPS图片.png","size":1466,"type":"image/png","url":"http://175.178.247.222:9990/uploadImages/WPS图片.png"}]',
      dialogUploadFiles: [],    // 弹窗上传文件数组
      fileUploadVisible: false, // 文件上传弹窗显示状态
      
      // 上传状态检测
      uploadStatus: '无上传',
      uploadingCount: 0,
      lastCheckTime: '',
      statusTimer: null,

      // 组件禁用状态
      imageUploadDisabled: false,
      documentUploadDisabled: false,
      imageUploadStringDisabled: false,
      documentUploadStringDisabled: false
    }
  },
  mounted() {
    // 启动状态检查定时器
    this.startStatusCheck()
    
    // 添加全局上传状态观察者
    globalUploadManager.addObserver(this.onUploadStatusChange)
  },
  beforeDestroy() {
    // 清理定时器
    if (this.statusTimer) {
      clearInterval(this.statusTimer)
    }
    
    // 移除观察者
    globalUploadManager.removeObserver(this.onUploadStatusChange)
  },
  methods: {
    getBlockByGroup,
    // Mock用户数据API
    async getUserList(params) {
      // 模拟API延迟
      await new Promise(resolve => setTimeout(resolve, 500))
      
      const mockUsers = [
        { id: 1, name: '张三', username: 'zhangsan', email: 'zhangsan@example.com', phone: '13800138001', status: '1' },
        { id: 2, name: '李四', username: 'lisi', email: 'lisi@example.com', phone: '13800138002', status: '1' },
        { id: 3, name: '王五', username: 'wangwu', email: 'wangwu@example.com', phone: '13800138003', status: '0' },
        { id: 4, name: '赵六', username: 'zhaoliu', email: 'zhaoliu@example.com', phone: '13800138004', status: '1' },
        { id: 5, name: '钱七', username: 'qianqi', email: 'qianqi@example.com', phone: '13800138005', status: '1' }
      ]

      let filteredUsers = mockUsers

      // 根据搜索条件过滤
      if (params.name) {
        filteredUsers = filteredUsers.filter(user => user.name.includes(params.name))
      }
      if (params.username) {
        filteredUsers = filteredUsers.filter(user => user.username.includes(params.username))
      }
      if (params.status) {
        filteredUsers = filteredUsers.filter(user => user.status === params.status)
      }

      // 分页处理
      const start = (params.pageNum - 1) * params.pageSize
      const end = start + params.pageSize
      const pageData = filteredUsers.slice(start, end)

      return {
        data: {
          list: pageData,
          total: filteredUsers.length,
          pageNum: params.pageNum,
          pageSize: params.pageSize
        }
      }
    },

    // Mock部门数据API
    async getDeptList(params) {
      // 模拟API延迟
      await new Promise(resolve => setTimeout(resolve, 500))
      
      const mockDepts = [
        { id: 1, deptName: '技术部', leader: '张技术', phone: '13900139001', status: '1' },
        { id: 2, deptName: '人事部', leader: '李人事', phone: '13900139002', status: '1' },
        { id: 3, deptName: '财务部', leader: '王财务', phone: '13900139003', status: '1' },
        { id: 4, deptName: '市场部', leader: '赵市场', phone: '13900139004', status: '1' },
        { id: 5, deptName: '行政部', leader: '钱行政', phone: '13900139005', status: '0' }
      ]

      let filteredDepts = mockDepts

      // 根据搜索条件过滤
      if (params.deptName) {
        filteredDepts = filteredDepts.filter(dept => dept.deptName.includes(params.deptName))
      }
      if (params.leader) {
        filteredDepts = filteredDepts.filter(dept => dept.leader.includes(params.leader))
      }

      // 分页处理
      const start = (params.pageNum - 1) * params.pageSize
      const end = start + params.pageSize
      const pageData = filteredDepts.slice(start, end)

      return {
        data: {
          list: pageData,
          total: filteredDepts.length,
          pageNum: params.pageNum,
          pageSize: params.pageSize
        }
      }
    },

    // 单选change事件
    handleSingleChange(data) {
      console.log('单选change:', data)
      this.singleData = data
    },

    // 多选change事件
    handleMultipleChange(data) {
      console.log('多选change:', data)
      this.multipleData = data
    },

    // 清空单选
    clearSingle() {
      this.singleValue = ''
      this.singleDisplayLabel = ''
      this.singleData = null
    },

    // 清空多选
    clearMultiple() {
      this.multipleValue = ''
      this.multipleDisplayLabel = ''
      this.multipleData = []
    },

    // 设置示例值
    setSampleValues() {
      this.singleValue = '2'
      this.singleDisplayLabel = '李四'
      
      this.multipleValue = '1,3'
      this.multipleDisplayLabel = '技术部,财务部'
      
      // 设置所选择示例值
      this.blockSingleValue = '1'
      this.blockSingleDisplayLabel = 'S001'
      
      this.blockMultipleValue = '1,2'
      this.blockMultipleDisplayLabel = 'S001,S002'
    },

    // BlockBrowser单选change事件
    handleBlockSingleChange(data) {
      console.log('所选择单选change:', data)
      this.blockSingleData = data
    },

    // BlockBrowser多选change事件
    handleBlockMultipleChange(data) {
      console.log('所选择多选change:', data)
      this.blockMultipleData = data
    },

    // 清空所选择
    clearBlock() {
      this.blockSingleValue = ''
      this.blockSingleDisplayLabel = ''
      this.blockSingleData = null
      this.blockMultipleValue = ''
      this.blockMultipleDisplayLabel = ''
      this.blockMultipleData = []
    },

    // ===== 上传组件相关方法 =====
    
    // 开始状态检查
    startStatusCheck() {
      this.statusTimer = setInterval(() => {
        this.updateUploadStatus()
      }, 1000)
    },
    
    // 更新上传状态显示
    updateUploadStatus() {
      const hasUploading = hasFilesUploading()
      const count = getUploadingFilesCount()
      
      this.uploadStatus = hasUploading ? '有文件正在上传' : '无上传'
      this.uploadingCount = count
      this.lastCheckTime = new Date().toLocaleTimeString()
    },
    
    // 上传状态变化回调
    onUploadStatusChange(event, target) {
      console.log('Upload status changed:', event, target)
      this.updateUploadStatus()
    },

    // 显示文件上传弹窗
    showFileUploadDialog() {
      this.fileUploadVisible = true
    },

    // 文件上传弹窗打开
    handleFileUploadOpen() {
      console.log('文件上传弹窗打开')
    },

    // 文件上传弹窗关闭
    handleFileUploadClose() {
      console.log('文件上传弹窗关闭')
    },

    // 文件上传弹窗确认
    handleFileUploadConfirm(fileList) {
      console.log('文件上传弹窗确认:', fileList)
      this.dialogUploadFiles = [...fileList]
      this.fileUploadVisible = false
      this.$message.success('文件上传确认完成')
    },

    // 上传成功回调
    handleUploadSuccess(response, file, fileList) {
      console.log('上传成功:', response, file, fileList)
      this.$message.success(`文件 ${file.name} 上传成功`)
    },

    // 上传失败回调
    handleUploadError(err, file, fileList) {
      console.log('上传失败:', err, file, fileList)
      this.$message.error(`文件 ${file.name} 上传失败`)
    },

    // 下载模板
    handleDownloadTemplate() {
      console.log('下载模板')
      this.$message.info('模板下载功能需要后端支持')
    },

    // 检查上传状态
    checkUploadStatus() {
      const hasUploading = this.$hasFilesUploading()
      const count = this.$getUploadingFilesCount()
      
      this.$message.info(`当前上传状态：${hasUploading ? '有文件正在上传' : '无上传'}，数量：${count}`)
    },

    // 安全提交测试
    safeSubmitTest() {
      this.$safeSubmit(() => {
        console.log('安全提交测试 - 提交数据：', {
          images: this.imageFiles,
          documents: this.documentFiles,
          dialogs: this.dialogUploadFiles
        })
        this.$message.success('安全提交测试完成！')
      }, {
        message: '检测到有文件正在上传中，请等待上传完成后再提交'
      })
    },

    // 等待上传完成测试
    async waitForUploadsTest() {
      try {
        this.$message.info('开始等待所有上传完成...')
        await waitForUploadsComplete(10000) // 10秒超时
        this.$message.success('所有文件上传完成！')
      } catch (error) {
        this.$message.error('等待上传完成超时：' + error.message)
      }
    },

    // 清空所有文件
    clearAllFiles() {
      this.imageFiles = []
      this.documentFiles = []
      this.dialogUploadFiles = []
      this.$message.info('已清空所有上传文件')
    },

    // ===== 字符串类型测试方法 =====

    // 测试字符串转换
    testStringConversion() {
      try {
        const imageData = JSON.parse(this.imageFilesString || '[]')
        const documentData = JSON.parse(this.documentFilesString || '[]')
        
        this.$message.success(`字符串解析成功！图片文件：${imageData.length}个，文档文件：${documentData.length}个`)
        
        console.log('解析结果:', {
          imageData,
          documentData
        })
      } catch (error) {
        this.$message.error('字符串解析失败：' + error.message)
      }
    },

    // 清空字符串数据
    clearStringData() {
      this.imageFilesString = ''
      this.documentFilesString = ''
      this.$message.info('已清空字符串数据')
    },

    // 设置测试字符串数据
    setStringTestData() {
      const testImageData = [
        {
          name: "测试图片1.jpg",
          size: 2048,
          type: "image/jpeg",
          url: "http://example.com/test1.jpg"
        },
        {
          name: "测试图片2.png",
          size: 1536,
          type: "image/png",
          url: "http://example.com/test2.png"
        }
      ]

      const testDocumentData = [
        {
          name: "测试文档.pdf",
          size: 5120,
          type: "application/pdf",
          url: "http://example.com/test.pdf"
        },
        {
          name: "测试表格.xlsx",
          size: 3072,
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
          url: "http://example.com/test.xlsx"
        }
      ]

      this.imageFilesString = JSON.stringify(testImageData)
      this.documentFilesString = JSON.stringify(testDocumentData)
      this.$message.success('已设置测试字符串数据')
    }
  }
}
</script>

<style scoped>
.sysbrowser-test {
  padding: 20px;
}

.test-card {
  margin-bottom: 20px;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
}

.test-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #303133;
  font-size: 16px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: inline-block;
  width: 120px;
  font-weight: bold;
  color: #606266;
}

.result {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  margin-top: 15px;
}

.result p {
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.6;
}

.result strong {
  color: #409eff;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

/* 上传组件测试样式 */
.upload-test-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background-color: #fafafa;
}

.upload-test-item h4 {
  margin: 0 0 15px 0;
  color: #409eff;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid #409eff;
  padding-bottom: 8px;
}

.upload-test-item .result {
  margin-top: 20px;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 15px;
}

.upload-test-item .result pre {
  margin: 5px 0 0 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 12px;
  color: #303133;
  overflow-x: auto;
  max-height: 200px;
  overflow-y: auto;
}

.status-buttons {
  margin-bottom: 15px;
}

.status-buttons .el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.status-display {
  padding: 15px;
  background-color: #ecf5ff;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.status-display p {
  margin: 5px 0;
  color: #303133;
  font-size: 14px;
}

.component-controls {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f0f2f5;
  border-radius: 4px;
  border-left: 3px solid #409eff;
}

.component-controls .el-checkbox {
  color: #606266;
  font-weight: 500;
}

.string-test-section {
  margin-bottom: 25px;
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #fafbfc;
}

.string-test-section h5 {
  margin: 0 0 15px 0;
  color: #409eff;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 8px;
}

.string-test-controls {
  margin-top: 20px;
  text-align: center;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.string-test-controls .el-button {
  margin: 0 8px 8px 0;
}
</style>